<template>
  <UiCard>
    <UiCardHeader class="flex justify-between items-center">
      <span>订单事件：{{ item.created_time }}</span>
      <span>订单号:{{ item.no }}</span>
    </UiCardHeader>

    <UiCardBody> {{ item.goods }} </UiCardBody>

    <UiCardFooter class="flex justify-start items-center">
      <span v-if="item.type !== 'default'">[{{ t[item.type] }}]</span>
      <Price :value="item.price" />
      <span class="ml-auto" :class="{ 'text-green-600': item.status === 'success' }">
        {{ s[item.status] }}
      </span>

      <n-button
        @click="pay"
        v-if="item.status === 'pendding'"
        type="primary"
        size="small"
      >
        立即支付
      </n-button>
    </UiCardFooter>
  </UiCard>
</template>

<script setup>
// 引入naive-ui
import { NButton } from "naive-ui";

// 引用声明
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

// 类型
const s = {
  closed: "已关闭",
  success: "支付成功",
  pendding: "等待支付",
  grouping: "评团中",
};

// 类型
const t = {
  group: "评团",
  flashsale: "秒杀",
};

// 支付事件
const pay = () => {
  navigateTo(`/pay?no=${props.item.no}`)
};
</script>
